<template>
    <el-carousel :interval="3000" arrow="always" class="sweperSty" v-if="(swiperList[0] != null)">
        <el-carousel-item class="sewperItem" v-for="(item, index) in swiperList" :key="index">
            <img :src="item.drawingUrl" class="simgSty">
        </el-carousel-item>
    </el-carousel>


    <!-- 搜索栏 -->
    <div class="search  flex_str">
        <div class="searchBg flex_str">
            <div class="flex_cen locationSty">
                <el-cascader v-model="city" :options="options" :props="props" @change="handleChange" placeholder="定位"/>
            </div>
            <el-input placeholder="请输入关键词搜索" class="iptSty" v-model="cadName"  @keyup.enter.native="goSearchIndex"></el-input>
        </div>
        <div class="search_icon_bg flex_cen"  @click="goSearchIndex">
            <img src="@/assets/img/search.png" class="searchSty" />
        </div>
    </div>



    <div class="rankTitleSty flex_cen">
        <div class="flex_cen">
            <div class="dian"></div>
            <div class="recommend_title_sty ">精选排行榜</div>
            <div class="dian"></div>
        </div>
        <img src="@/assets/img/ranking.png" class="rankImgSty">
    </div>
    <!-- 排行榜 -->
    <div class="ranking flex_btn">
        <div class="rankingItem flex_cen_column">
            <div class="yueBang flex_cen">
                <img src="@/assets/img/bang.png" class="bangSty">
                <div style="color:#FFC264;font-size: 24px;margin-left: 10px; ">月榜</div>
            </div>
            <div class="rankingName">热门搜索地区/小区</div>

            <div class="rankThreeSty flex_cen" v-for="(item, index) in hotList" :key="index"
                @click="goHouseDetail(item.id)">
                <img src="@/assets/img/crown.png" class="crownSty" v-if="index == 0" />
                <img src="@/assets/img/second.png" class="crownSty" v-else-if="index == 1" />
                <img src="@/assets/img/third.png" class="crownSty" v-else-if="index == 2" />
                <div style="margin-right: 4px;" v-else>{{ index + 1 }}</div>
                <div style="width: 50%;" class="addressSty" :title="item.communityName">{{ item.communityName }}</div>
                <div class="addressSty" :title="item.position">{{ item.position }}</div>
            </div>
        </div>

        <div class="rankingItem flex_cen_column">
            <div class="yueBang flex_cen">
                <img src="@/assets/img/bang.png" class="bangSty">
                <div style="color:#FFC264;font-size: 24px;margin-left: 10px; ">月榜</div>
            </div>
            <div class="rankingName">最新上传地区/小区</div>
            <div class="rankThreeSty flex_cen" v-for="(item, index) in newUpdateList" :key="index"
                @click="goHouseDetail(item.id)">
                <img src="@/assets/img/crown.png" class="crownSty" v-if="index == 0" />
                <img src="@/assets/img/second.png" class="crownSty" v-else-if="index == 1" />
                <img src="@/assets/img/third.png" class="crownSty" v-else-if="index == 2" />
                <div style="margin-right: 4px;" v-else>{{ index + 1 }}</div>
                <div style="width: 50%;" class="addressSty" :title="item.communityName">{{ item.communityName }}</div>
                <div class="addressSty" :title="item.position">{{ item.position }}</div>
            </div>
        </div>

        <div class="rankingItem flex_cen_column">
            <div class="yueBang flex_cen">
                <img src="@/assets/img/bang.png" class="bangSty">
                <div style="color:#FFC264;font-size: 24px;margin-left: 10px; ">月榜</div>
            </div>
            <div class="rankingName">上传收入排行榜</div>

            <div class="rankThreeSty flex_cen" v-for="(item, index) in getIncomeRankin" :key="index">
                <img src="@/assets/img/crown.png" class="crownSty" v-if="index == 0" />
                <img src="@/assets/img/second.png" class="crownSty" v-else-if="index == 1" />
                <img src="@/assets/img/third.png" class="crownSty" v-else-if="index == 2" />
                <div style="margin-right: 4px;" v-else>{{ index + 1 }}</div>
                <div style="width: 50%;" class="addressSty" :title="item.userName">{{ item.userName }}</div>
                <div class="addressSty" :title="item.totalIncomeAmount" style="text-align:right;">{{ item.totalIncomeAmount
                }}元</div>
            </div>
        </div>

        <div class="rankingItem flex_cen_column">
            <div class="yueBang flex_cen">
                <img src="@/assets/img/bang.png" class="bangSty">
                <div style="color:#FFC264;font-size: 24px;margin-left: 10px; ">月榜</div>
            </div>
            <div class="rankingName">高定完整设计</div>

            <div class="rankThreeSty flex_cen" v-for="(item, index) in gaoUpdateList" :key="index"
                @click="goHouseDetail(item.id)">
                <img src="@/assets/img/crown.png" class="crownSty" v-if="index == 0" />
                <img src="@/assets/img/second.png" class="crownSty" v-else-if="index == 1" />
                <img src="@/assets/img/third.png" class="crownSty" v-else-if="index == 2" />
                <div style="margin-right: 4px;" v-else>{{ index + 1 }}</div>
                <div style="width: 50%;" class="addressSty" :title="item.communityName">{{ item.communityName }}</div>
                <div class="addressSty" :title="item.position">{{ item.position }}</div>
            </div>
        </div>
    </div>
    <!-- 为您推荐 -->
    <div class="recommend">
        <div class="flex_cen">
            <div class="flex_cen">
                <div class="dian"></div>
                <div class="recommend_title_sty">为您推荐</div>
                <div class="dian"></div>
            </div>
            <img src="@/assets/img/tuiJian.png" style="width: 40px;margin-left: 10px;">

        </div>
        <!-- <div class="recommend_tab flex_cen">
            <div class="recommend_item" v-for="(item, index) in recommendTab" :key="index"
                @click="selectRecommendTab(item.id)" :class="recommendTabId == item.id ? 'recommend_add' : ''">{{
                    item.name
                }}</div>
        </div> -->
        <div class="recommend_list_sty">
            <div class="recommend_item_sty" v-for="(item, index) in tuiJianList" :key="index"
                @click="goHouseDetail(item.id)">
                <img :src="item.firstImage" class="footerImgSty">
                <div class="tuijianNameSty" :title="item.communityName + item.buildingNo">{{ item.communityName }} - {{
                    item.buildingNo }}</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import cityData from '@/utils/city.json'
import { getSwiperApi, getHotSearchApi, getNewUpdateApi, getGaoUpdateApi, getIncomeRankingApi, getHouseRecommendedForApi, shouYiBangApi } from '@/api/index/index'
import { useRouter } from 'vue-router'
const router = useRouter()
const city = ref<any>('定位')
const props = {
    expandTrigger: 'hover',
    label: 'name',
    value: 'name',
    checkStrictly: true
}
const cadName = ref<string>('')
const recommendTab = ref([
    {
        id: 1,
        name: '综合'
    }, {
        id: 2,
        name: '3D模型'
    }, {
        id: 3,
        name: 'SU模型'
    }, {
        id: 4,
        name: '案例'
    }, {
        id: 5,
        name: '图集'
    }, {
        id: 6,
        name: '效果图'
    }, {
        id: 7,
        name: '方案文本'
    }
])
const recommendTabId = ref(1)
const swiperList = ref<any>([])
const options = cityData

interface hotListType {
    communityName: string,
    position: string,
    id: number | string
}
interface houseItemType {
    communityName: string,
    firstImage: string,
    id: number | string
}
interface tuijianType {
    buildingNo: number | string,
    communityName: string,
    firstImage: string,
    id: number | string
}
const hotList = ref<hotListType[]>([
])
const newUpdateList = ref<hotListType[]>([
])

const gaoUpdateList = ref<hotListType[]>([
])

const getIncomeRankin = ref<any[]>([
])
const tuiJianList = ref<tuijianType[]>([
])
const goSearchIndex = () => {
    let cityName = ''
    if (city.value == '定位') {
        cityName = ''
    } else {
        city.value.map((v:any)=>{
            cityName+=v
        })
        // if(city.value.length> 2){
        //     cityName = city.value[0] + city.value[1] + city.value[2]
        // }else{
        //     cityName = city.value[0] + city.value[1]
        // }
        
    }
    
    // router.push({ path: '/room/list'})
    router.push({ path: '/room/list', query: { position:cityName, keyword: cadName.value } })
}
const handleChange = (e: any) => {
    console.log(e,city)
    city.value = e
}
const selectRecommendTab = (id: number) => {
    recommendTabId.value = id
}
const getSwiperImg = () => {
    getSwiperApi({ type: 1 }).then((res: any) => {
        swiperList.value = res.data
    })
}
const getHotSearchList = () => {
    getHotSearchApi().then((res: any) => {
        if (res.data.length > 0) {
            hotList.value = res.data
        }

    })
}
const getNewUpdateList = () => {
    getNewUpdateApi().then((res: any) => {
        if (res.data.length > 0) {
            newUpdateList.value = res.data
        }
    })
}
const gaoNewUpdateList = () => {
    getGaoUpdateApi().then((res: any) => {
        if (res.data.length > 0) {
            gaoUpdateList.value = res.data
        }
    })
}
const getIncomeRankinList = () => {
    shouYiBangApi().then((res: any) => {
        if (res.data.length > 0) {
            getIncomeRankin.value = res.data
        }
    })
}
const getHouseRecommendedFor = () => {
    getHouseRecommendedForApi().then((res: any) => {
        if (res.data.length > 0) {
            tuiJianList.value = res.data
        }
    })
}

const goHouseDetail = (id: number | string) => {
    router.push({ path: '/room/detail', query: { id: id } })
}


onMounted(() => {
    getSwiperImg()
    getHotSearchList()
    getNewUpdateList()
    gaoNewUpdateList()
    getIncomeRankinList()
    getHouseRecommendedFor()
})
</script>
<style scoped>
:deep(.el-input__wrapper) {
    background: none;
    box-shadow: 0 0 0 0 #fff;
}

:deep(.el-scrollbar__wrap--hidden-default) {
    height: 18.625vw !important;
}

:deep(.el-scrollbar__wrap) {
    height: 18.625vw !important;
}

.tuijianNameSty {
    width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.footerImgSty{
    width: 200px;
    height: 140px;
}
.addressSty {
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.recommend_list_sty {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 100%;
}

.recommend_item_sty {
    width: 20%;
    text-align: center;
    margin-bottom: 12px;
}

.recommend_list_sty:nth-child(5n) {
    margin: 0;
}


.recommend_item_sty img {
    width: 270px;
}

.recommend_add {
    color: #fff;
    background-color: #000 !important;
}

.recommend {
    width: 80vw;
    margin: 60px 0;
    margin-left: 10vw;
    background-color: #fff;
    min-height: 100px;
    padding: 20px;
}

.recommend_tab {
    margin-top: 20px;
}

.recommend_item {
    width: 120px;
    text-align: center;
    padding: 2px 20px;
    font-size: 18px;
    background-color: #F0F0F0;
    margin: 0 10px;
    border-radius: 20px;

}

.recommend_title_sty {
    margin: 0 10px;
}

.dian {
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
}

.crownSty {
    width: 40px;
}

.iconSty {
    width: 28px;
}

.rankImgSty {
    width: 80px;
}

.rankOneSty {
    width: 90%;
    padding: 10px 0;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.rankTwoSty {
    width: 90%;
    margin-top: 10px;
}

.rankThreeSty {
    width: 90%;
    margin-top: 10px;

}

.rankTitleSty {
    width: 60%;
    margin-left: 20%;
    border-bottom: 4px solid #ccc;
    padding: 20px 0;
    text-align: center;
    font-weight: 700;
}

.sewperItem {
    width: 100vw;
    height: 600px;
}

.sweperSty {
    position: relative;
    height: 600px;
}

.search {
    position: absolute;
    top: 150px;
    left: 20%;
    width: 60%;
    height: 60px;

}

.searchBg {
    width: 90%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #EDEBEA;
}


.search_icon_bg {
    background: #FA9E42;
    height: 60px;
    width: 100px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.searchSty {
    width: 40px;
    height: 40px;
}

.simgSty {
    width: 100vw;
    height: 600px;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}



.ranking {
    width: 80vw;
    margin-left: 10vw;
    margin-top: 60px;
}

.bangSty {
    width: 50px;
}

.rankingItem {
    width: 18vw;
    height: 480px;
    background: #fff;
    border-radius: 20px;
    font-size: 16px;
}

.rankingName {
    padding: 20px;
}

.rankingTitle {
    width: 100%;
    padding: 0 20px;
}

.title {
    margin: 30px 0 10px 0;
}



.locationSty {
    width: 150px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    align-items: center;
    border-right: 1px solid #F8F7F0;
}

.downSty {
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

.iptSty {
    height: 56px;
    border: 0;
    width: 80%;
}



.flex_start {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}</style>